<template>

  <div id="projectInfoList">
    <el-row>
      <!-- 左边项目 -->
      <el-col :span="6">
        <div class="grid-content gridLeft">
          <h4>项目列表</h4>
          <el-row>
            <div class="userHandle">
              <el-button type="primary" icon="el-icon-circle-plus-outline" round @click.native="openAddChildrenProject"
                         size="mini">
                新增子项目
              </el-button>
              <el-button type="success" icon="el-icon-edit" round @click.native="openUpdateChildrenProject" size="mini">
                修改子项目
              </el-button>
              <el-button type="danger" icon="el-icon-delete" round @click.native="deleteChildrenProject" size="mini">
                删除子项目
              </el-button>
            </div>
          </el-row>
          <el-tree :data="projectTreeData" :props="projectProps" @node-click="projectTreeClick"
                   default-expand-all highlight-current></el-tree>
        </div>
      </el-col>

      <!-- 右边文档列表 -->
      <el-col :span="18">
        <div class="grid-content gridRight">
          <h4>{{rightTitle}}</h4>
          <!-- 列表工具栏 -->
          <el-row class="userHandle">
            <div class="cf handleLeft">
              <el-button type="primary" icon="el-icon-circle-plus-outline" round @click.native="openAdd"
                         size="mini">
                新增
              </el-button>
            </div>
            <div class="cf handleRight">
              <el-input v-model="searchProjectDocName" placeholder="请输入文档名称" clearable>
              </el-input>
              <el-button type="primary" icon="el-icon-search" round @click.native="searchProjectDocPage" size="mini">搜索
              </el-button>
              <el-button type="info" icon="el-icon-refresh" round @click.native="resetProjectDocPage" size="mini">重置
              </el-button>
            </div>
          </el-row>

          <!-- 文档列表数据 -->
          <el-table
            :data="projectDocList"
            style="width: 100%" highlight-current-row @row-click="">
            <el-table-column
              prop="projectDocName"
              label="文档名称"
              align="center">
            </el-table-column>
            <el-table-column
              prop="author"
              label="作者"
              align="center">
            </el-table-column>
            <el-table-column
              fixed="right"
              label="操作"
              align="center">
              <template slot-scope="scope">
                <el-button icon="el-icon-edit" round @click.native="openUpdate(scope.row)" size="mini">
                  修改
                </el-button>
                <el-button icon="el-icon-view" round @click.native="openView(scope.row)" size="mini">查看
                </el-button>
                <el-button icon="el-icon-delete" round @click.native="deleteDoc(scope.row)" size="mini">删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            layout="prev, pager, next"
            :page-sizes="[5]"
            :page-size="projectDocListPageSize"
            :total="projectDocListPageTotal"
            @current-change="currentChangeProjectDocListPage">
          </el-pagination>
        </div>
      </el-col>
    </el-row>

    <!-- 子项目弹窗 -->
    <el-dialog title="项目信息" :visible.sync="projectInfoDialog">
      <el-form :model="childrenProjectForm" ref="childrenProjectForm" label-position="left">
        <el-form-item label="上级项目" :label-width="formLabelWidth">
          <el-input v-model="childrenProjectForm.projectParentName" autocomplete="off" placeholder="上级项目"
                    :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="项目名称" :label-width="formLabelWidth" prop="projectInfoName"
                      :rules="{required: true, message: '项目名称不能为空', trigger: 'blur'}">
          <el-input v-model="childrenProjectForm.projectInfoName" autocomplete="off" placeholder="项目名称"></el-input>
        </el-form-item>
        <el-form-item label="项目内容" :label-width="formLabelWidth">
          <el-input v-model="childrenProjectForm.projectInfoContent" autocomplete="off" placeholder="项目内容"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="projectInfoDialog = false">取 消</el-button>
        <el-button type="primary" @click="saveOrUpdateChildrenProject('childrenProjectForm')">确 定</el-button>
      </div>
    </el-dialog>

  </div>


</template>


<script>

  import api from "@/assets/js/project/project_info_list.js";
  import common from "@/assets/js/common/common.js";

  export default {
    data() {
      return {
        projectTreeData: [],//树形项目数据
        //树形项目定义的格式对应关系
        projectProps: {
          children: 'childrenList',
          label: 'projectInfoName'
        },
        projectInfoId: null,
        projectDocList: null,
        projectDocListPageNo: 1,
        projectDocListPageTotal: 0,
        projectDocListPageSize: 10,
        searchProjectDocName: null,
        formLabelWidth: '120px', //全部form宽度
        rightTitle: "文档列表",
        //子项目弹窗状态
        projectInfoDialog: false,
        //子项目表单
        childrenProjectForm: {
          projectInfoId: null,
          projectInfoName: null,
          projectParentName: null,
          projectParentId: null,
          projectInfoContent: null
        }

      }
    },
    mounted: function () {
      //获取项目分页列表
      this.getProjectInfoList({});
    },
    methods: {
      /**
       * 获取项目分页列表
       * */
      getProjectInfoList(param) {
        api.getProjectInfoList(param).then((res) => {
          this.projectTreeData = res.data;
        });
      },
      /**
       * 项目树点击事件
       * */
      projectTreeClick(data) {
        this.projectDocListPageNo = 1;
        // 根据项目id，获取文档列表
        this.getProjectDocPage({
          pageNo: this.projectDocListPageNo,
          pageSize: this.projectDocListPageSize,
          projectInfoId: data.projectInfoId
        });
        this.projectInfoId = data.projectInfoId;
        this.rightTitle = data.projectInfoName;
      },
      /**
       * 根据项目主键获取文档分页列表
       * */
      getProjectDocPage(param) {
        api.getProjectDocPage(param).then((res) => {
          this.projectDocList = res.data.list;
          this.projectDocListPageTotal = parseInt(res.data.total);//页总数
          this.projectDocListPageNo = parseInt(res.data.pageNum);//当前页
        });
      },
      /**
       * 打开新增页面
       * */
      openAdd() {
        window.localStorage.setItem("projectInfoId", this.projectInfoId);
        let routeData = this.$router.resolve({
          name: 'projectAddDoc', query: {
            projectInfoId: this.projectInfoId,
            projectDocId: null
          }
        });
        window.open(routeData.href, '_blank');

      },
      /**
       * 打开修改页面
       * */
      openUpdate(row) {
        // console.log(row.projectDocId);
        window.localStorage.setItem("projectDocId", row.projectDocId);
        window.localStorage.setItem("projectDocName", row.projectDocName);
        window.localStorage.setItem("projectInfoId", this.projectInfoId);
        let routeData = this.$router.resolve({
          name: 'projectEditDoc', query: {
            projectDocId: row.projectDocId,
            projectInfoId: this.projectInfoId
          }
        });
        window.open(routeData.href, '_blank');


      },
      /**
       * 打开查看页面
       * */
      openView(row) {
        // console.log(row.projectDocId);
        window.localStorage.setItem("projectDocId", row.projectDocId);
        window.localStorage.setItem("projectDocName", row.projectDocName);
        window.localStorage.setItem("projectInfoId", this.projectInfoId);
        let routeData = this.$router.resolve({
          name: 'projectViewDoc', query: {
            projectDocId: row.projectDocId,
            projectInfoId: this.projectInfoId
          }
        });
        window.open(routeData.href, '_blank');
      },
      /**
       * 删除文档
       * */
      deleteDoc(row) {
        this.$confirm("确认是否删除【" + row.projectDocName + "】", "是否继续?", '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          api.deleteDoc({
            projectDocId: row.projectDocId
          }).then((res) => {
            this.getProjectDocPage({
              pageNo: this.projectDocListPageNo,
              pageSize: this.projectDocListPageSize,
              projectInfoId: this.projectInfoId
            });
            common.generalMessage(res); //提示框信息
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作'
          });
        });
      },
      /**
       * 检索文档列表
       * */
      searchProjectDocPage() {
        this.getProjectDocPage({
          pageNo: this.projectDocListPageNo,
          pageSize: this.projectDocListPageSize,
          projectInfoId: this.projectInfoId,
          projectDocName: this.searchProjectDocName
        })
      },
      /**
       * 检索文档列表
       * */
      resetProjectDocPage() {
        this.searchProjectDocName = null;
        this.getProjectDocPage({
          pageNo: 1,
          pageSize: this.projectDocListPageSize,
          projectInfoId: this.projectInfoId,
          projectDocName: this.searchProjectDocName
        });
      },
      /**
       * 分页点击事件
       * */
      currentChangeProjectDocListPage(val) {
        this.getProjectDocPage({
          pageNo: val,
          pageSize: this.projectDocListPageSize,
          projectInfoId: this.projectInfoId,
          projectDocName: this.searchProjectDocName
        });
      },
      /**
       * 打开新增子项目
       * */
      openAddChildrenProject() {
        if (this.projectInfoId == null) {
          common.message("请选择项目",);
          return;
        }
        api.getProjectById({
          projectInfoId: this.projectInfoId
        }).then((res) => {
          if (res.data.projectParentId == null || res.data.projectParentId == "") {
            this.childrenProjectForm = {};
            this.childrenProjectForm.projectParentId = this.projectInfoId;
            this.childrenProjectForm.projectParentName = res.data.projectInfoName;
            this.projectInfoDialog = true;
          } else {
            common.message("请选择父级项目",);
          }
        });
      },
      /**
       * 打开修改子项目
       * */
      openUpdateChildrenProject() {
        if (this.projectInfoId == null) {
          common.message("请选择项目",);
          return;
        }
        api.getProjectById({
          projectInfoId: this.projectInfoId
        }).then((res) => {
          if (res.data.projectParentId != null && res.data.projectParentId != "") {
            this.childrenProjectForm = {};
            this.childrenProjectForm.projectInfoId = res.data.projectInfoId;
            this.childrenProjectForm.projectParentId = this.projectInfoId;
            // this.childrenProjectForm.projectParentName = res.data.projectInfoName;
            for (let i = 0; i < this.projectTreeData.length; i++) {
              if (this.projectTreeData[i].projectInfoId == res.data.projectParentId) {
                this.childrenProjectForm.projectParentName = this.projectTreeData[i].projectInfoName;
              }
            }
            this.childrenProjectForm.projectInfoName = res.data.projectInfoName;
            this.childrenProjectForm.projectInfoContent = res.data.projectInfoContent;
            this.projectInfoDialog = true;
          } else {
            common.message("请选择子项目",);
          }

        });
      },
      /**
       * 保存子项目
       * */
      saveOrUpdateChildrenProject() {
        if (this.childrenProjectForm.projectInfoId) {
          //修改
          api.updateChildrenProject(this.childrenProjectForm).then((res) => {
            common.generalMessage(res);
            this.projectInfoDialog = false;
            this.getProjectInfoList({});
          });
        } else {
          //新增
          api.saveChildrenProject(this.childrenProjectForm).then((res) => {
            common.generalMessage(res);
            this.projectInfoDialog = false;
            this.getProjectInfoList({});
          });
        }
      },
      /**
       * 删除子项目
       * */
      deleteChildrenProject() {
        if (this.projectInfoId == null) {
          common.message("请选择需要删除的子项目", "warning");
          return;
        }
        this.$confirm("确认是否删除项目【" + this.rightTitle + "】", "是否继续?", '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          api.deleteChildrenProject({
            projectInfoId: this.projectInfoId
          }).then((res) => {
            this.getProjectInfoList();//重新加载树形数据
            common.generalMessage(res); //提示框信息
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作'
          });
        });
      }
    }
  }
</script>

<style lang="scss">
  #projectInfoList {
    .cf:after, .cf::after {
      content: '';
      display: block;
      clear: both;
    }

    .el-col {
      border-radius: 4px;
    }

    .grid-content {
      margin: 30px;
      border-radius: 4px;
      background: white;
      padding-bottom: 20px;

      h4 {
        border-bottom: 2px solid #F1F1F1;
        margin: 0 20px;
        padding: 10px 0;
      }

      .userHandle {
        padding: 15px 20px;
        line-height: 40px;

        .handleLeft {
          float: left;
        }

        .handleRight {
          float: right;
        }
      }

      .el-button.is-round {
        border-radius: 6px;
      }

      .el-input {
        width: auto
      }
    }

    .gridLeft {
      margin-right: 2px;

      .el-tree {
        display: inline-block;
        width: 70%;
      }
    }

    .gridRight {
      margin-left: 2px;

      .el-pagination {
        margin-top: 20px;
      }
    }

    .row-bg {
      padding: 10px 0;
      background-color: #f9fafc;
    }
  }
</style>


